const path = require('path');//依赖node的path模块
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin插件，该插件会在构建时生成index.html文件，而文件中会引入所有的输出文件


const CleanWebpackPlugin = require('clean-webpack-plugin');
//输出目录清理插件，这样每次构建会清空输出目录（毕竟每次构建都会重新生成文件，只不过同名文件会覆盖），这样就可以避免一些不必要的残留文件堆积
/**
 *不够，注意在没有html-webpack-plugin将不会自动生成一个index.html，这时如果使用了清理插件，我们将不能保留手动创建的html文件，
 * 也不能自动生成一个引用了输出文件的html文件
 */

module.exports = {
    //entry: './src/index.js',//入口文件
    //另一种方式声明入口文件
    entry: {
        app: "./src/index.js",
        print: "./src/print.js"
    },
    //source-map有多个选项，inline-source-map只是其中一种
    devtool: "inline-source-map",//使用source-map可以帮助我们定位出错源代码，否则我们只知道bundle文件的报错，而不知道是哪个源文件的错误
    plugins: [
        new CleanWebpackPlugin(["dist"]),
        new HtmlWebpackPlugin({
            title: "生成html文件的title"
        })
    ],
    //使用webpack-dev-server，声明web目录是dist
    devServer: {
        contentBase: "./dist"
    },
    output: {
        //可以将多个入口文件打包成多个输出文件,[name]对应entry的key
        filename: '[name].bundle.js',//输出文件，若npx webpack --config webpack.config.js使用配置打包，则输出文件到bundle.js，最终index.html应该引入bundle.js
        path: path.resolve(__dirname, 'dist')//输出目录
    }
};